<template>
  <div v-if="!note" class="note-detail-empty">请选择一个笔记查看详情</div>
  <div v-else class="note-detail">
    <div class="note-detail-header">
      <div>
        <p class="note-detail-label">当前笔记</p>
        <h1>{{ note.name || '未命名笔记' }}</h1>
      </div>
      <div class="note-detail-actions">
        <div class="note-detail-meta">
          <span>创建：{{ formatDate(note.created_at) }}</span>
          <span>更新：{{ formatDate(note.updated_at) }}</span>
        </div>
        <div class="note-detail-buttons">
          <button class="note-action-btn edit-btn" @click="$emit('edit-note', note)" title="编辑笔记">
            <i class="fa-solid fa-pen"></i>
            编辑
          </button>
          <button class="note-action-btn back-btn" @click="$emit('back-to-list')" title="返回列表">
            <i class="fa-solid fa-arrow-left"></i>
            返回
          </button>
        </div>
      </div>
    </div>

    <section class="note-detail-content">
      <div class="note-detail-text" v-html="renderedContent"></div>
    </section>

    <!-- 版本历史组件 -->
    <NoteVersionHistory 
      v-if="note && note.id" 
      :note-id="note.id" 
      @version-restored="handleVersionRestored"
    />

    <section v-if="note.children && note.children.length" class="note-detail-children">
      <header>
        <h2>子笔记</h2>
        <p>共 {{ note.children.length }} 条</p>
      </header>
      <div class="child-grid">
        <article 
          v-for="child in note.children" 
          :key="child.id" 
          class="child-card clickable"
          @click="$emit('view-note', child)"
        >
          <h3>{{ child.name || '未命名' }}</h3>
          <p>{{ (child.content && child.content.slice(0, 120)) || '无内容' }}</p>
          <span>{{ formatDate(child.created_at) }} 创建</span>
        </article>
      </div>
    </section>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
import NoteVersionHistory from './NoteVersionHistory.vue';

// 配置 marked
marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(code, { language: lang }).value;
      } catch (err) {}
    }
    return hljs.highlightAuto(code).value;
  },
  breaks: true,
  gfm: true,
});

const props = defineProps({
  note: Object,
});

const emit = defineEmits(['edit-note', 'back-to-list', 'note-updated', 'view-note']);

// Markdown 渲染
const renderedContent = computed(() => {
  if (!props.note || !props.note.content) {
    return '<p class="no-content">无内容</p>';
  }
  
  try {
    return marked(props.note.content);
  } catch (err) {
    console.error('Markdown 渲染错误:', err);
    return '<p class="error">内容渲染失败</p>';
  }
});

// 处理版本恢复
const handleVersionRestored = () => {
  // 通知父组件笔记已更新，需要重新加载
  emit('note-updated');
};

function formatDate(dateString) {
  if (!dateString) return '';
  const d = new Date(dateString);
  const yy = String(d.getFullYear()).slice(-2);
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return `${yy}-${mm}-${dd}`;
}
</script>

<style scoped>
.note-detail-empty {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #9aa3b8;
}

.note-detail {
  padding: 32px;
  max-width: 880px;
  margin: 0 auto;
  color: #2f3654;
}

.note-detail-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.note-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.note-detail-buttons {
  display: flex;
  gap: 8px;
}

.note-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(207, 215, 235, 0.8);
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.note-action-btn:hover {
  background: rgba(76, 110, 245, 0.08);
  border-color: rgba(76, 110, 245, 0.3);
}

.edit-btn {
  color: #4c6ef5;
}

.back-btn {
  color: #6b7280;
}

.back-btn:hover {
  color: #374151;
}

.note-detail-label {
  font-size: 13px;
  color: #9aa3b8;
  margin-bottom: 4px;
}

.note-detail-header h1 {
  font-size: 28px;
  margin: 0;
}

.note-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #99a4c2;
  text-align: right;
}

.note-detail-content {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(209, 218, 238, 0.8);
  padding: 24px;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.07);
}

.note-detail-text {
  font-size: 15px;
  line-height: 1.7;
  color: #404968;
}

.note-detail-text h1,
.note-detail-text h2,
.note-detail-text h3,
.note-detail-text h4,
.note-detail-text h5,
.note-detail-text h6 {
  margin: 24px 0 16px 0;
  font-weight: 600;
  color: #2f3654;
  line-height: 1.3;
}

.note-detail-text h1 { font-size: 28px; }
.note-detail-text h2 { font-size: 24px; }
.note-detail-text h3 { font-size: 20px; }
.note-detail-text h4 { font-size: 18px; }
.note-detail-text h5 { font-size: 16px; }
.note-detail-text h6 { font-size: 14px; }

.note-detail-text h1:first-child,
.note-detail-text h2:first-child,
.note-detail-text h3:first-child {
  margin-top: 0;
}

.note-detail-text p {
  margin: 0 0 16px 0;
}

.note-detail-text ul,
.note-detail-text ol {
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.note-detail-text li {
  margin-bottom: 8px;
}

.note-detail-text blockquote {
  margin: 20px 0;
  padding: 12px 20px;
  border-left: 4px solid #4c6ef5;
  background: #f8faff;
  font-style: italic;
  color: #5b6479;
  border-radius: 0 8px 8px 0;
}

.note-detail-text pre {
  margin: 20px 0;
  padding: 16px;
  background: #f6f8fc;
  border: 1px solid #e5e9f2;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
}

.note-detail-text code {
  background: #f1f3f8;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: #e83e8c;
  font-family: 'Fira Code', Consolas, monospace;
}

.note-detail-text pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.note-detail-text a {
  color: #4c6ef5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.note-detail-text a:hover {
  color: #3b5bdb;
  text-decoration: underline;
}

.note-detail-text strong {
  font-weight: 600;
  color: #2f3654;
}

.note-detail-text em {
  font-style: italic;
  color: #5b6479;
}

.note-detail-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.note-detail-text th,
.note-detail-text td {
  border: 1px solid #e5e9f2;
  padding: 12px;
  text-align: left;
}

.note-detail-text th {
  background: #f8faff;
  font-weight: 600;
  color: #2f3654;
}

.note-detail-text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.note-detail-text hr {
  border: none;
  height: 1px;
  background: #e5e9f2;
  margin: 32px 0;
}

.note-detail-text .no-content {
  color: #9aa3b8;
  font-style: italic;
  text-align: center;
  padding: 40px 0;
}

.note-detail-text .error {
  color: #f06565;
  font-style: italic;
  text-align: center;
  padding: 40px 0;
}

.note-detail-children {
  margin-top: 32px;
}

.note-detail-children header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.note-detail-children h2 {
  margin: 0;
  font-size: 20px;
}

.note-detail-children p {
  margin: 0;
  color: #99a4c2;
  font-size: 13px;
}

.child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.child-card {
  border-radius: 14px;
  border: 1px solid rgba(207, 215, 235, 0.9);
  background: #f9fbff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.child-card.clickable {
  cursor: pointer;
}

.child-card.clickable:hover {
  background: #f0f4ff;
  border-color: rgba(76, 110, 245, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 110, 245, 0.1);
}

.child-card h3 {
  margin: 0;
  font-size: 16px;
}

.child-card p {
  margin: 0;
  color: #5d6583;
  font-size: 14px;
}

.child-card span {
  font-size: 12px;
  color: #a0aac5;
}

@media (max-width: 768px) {
  .note-detail {
    padding: 20px;
  }
  
  .note-detail-actions {
    align-items: stretch;
  }
  
  .note-detail-buttons {
    justify-content: flex-start;
  }
  
  .note-action-btn {
    font-size: 13px;
    padding: 6px 10px;
  }
}
</style>
